<!--
  copyright (c) 2009 google inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps API Sample</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAwMhwoJJvbA36y50a8srh7hSCEl9-SC7IDYicgXt1cEF18Qh3FhT_3JQ8CRIhCdb8-3PDAooruRxsbw
"></script>
    <script type="text/javascript">

    var map;
    var geocoder;
    //var counter=0;

    function blankArray(n) {
     for (var i=0; i < n; i++)
       this[i] = null;
     this.length = n;
    }


    function initialize() {
     map = new GMap2(document.getElementById("map_canvas"));

     //Add map control
	 map.removeMapType(G_HYBRID_MAP);
	 map.setCenter(new GLatLng(34, 0), 1);
     map.addControl(new GLargeMapControl());
     var mapControl = new GMapTypeControl();
     map.addControl(mapControl);

     //Add Polyline
       var polyline = new GPolyline([
       new GLatLng(30.66, 104.2),
       new GLatLng(30.28, 120.2),new GLatLng(49,-123)
       ], "#ff0000", 5);
       map.addOverlay(polyline);

     geocoder = new GClientGeocoder();
    }




    // addAddressToMap() is called when the geocoder returns an
    // answer.  It adds a marker to the map with an open info window
    // showing the nicely formatted version of the address and the country code.
    function addAddressToMap(response) {
     //map.clearOverlays();
     if (!response || response.Status.code != 200) {
       alert("Sorry, we were unable to geocode that address");
     } else {
       place = response.Placemark[0];
       point = new GLatLng(place.Point.coordinates[1],
                           place.Point.coordinates[0]);
	   marker = new GMarker(point);
       map.addOverlay(marker);

       if(place.Point.coordinates[1]==30.6610565&&place.Point.coordinates[0]==104.0817566){
		 var myHtml = place.address + '<br>' +
         '<img src=\"pic/sc.jpg\" alt=\"Sichuan\"></img><h2>Jiuzhaigou in my hometown</h2>';
       }
       else if(place.Point.coordinates[1]==30.2739768&&place.Point.coordinates[0]==120.1729739){
		 var myHtml = place.address + '<br>' +'<img src=\"pic/zju.jpg\" alt=\"Zhejiang University\"></img><h2>Study for two years and continue from April</h2>';
       }
       else if(place.Point.coordinates[1]==49.263588&&place.Point.coordinates[0]==-123.138565){
		 var myHtml = place.address + '<br>' +'<img src=\"pic/van.jpg\" alt=\"Vancouver\"></img><h2>Where I am now</h2>';
       }
       else{
		 var myHtml = place.address + '<br>' +'<img src=\"pic/mars.jpg\" alt=\"Mars\"></img><h2>Probabaly it\'s the next destination!</h2>';
       }
       marker.openInfoWindowHtml(myHtml);


     }
    }

    // showLocation() is called when you click on the Search button
    // in the form.  It geocodes the address entered into the form
    // and adds a marker to the map at that location.
    function showLocation() {
     var address = document.forms[0].q.value;
     geocoder.getLocations(address, addAddressToMap);
    }

    // findLocation() is used to enter the sample addresses into the form.
    function findLocation(address) {
     document.forms[0].q.value = address;
     showLocation();
    }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
    <!-- Creates a simple input box where you can enter an address
         and a Search button that submits the form. //-->
    <form action="#" onsubmit="showLocation(); return false;">
      <p>
        <b>Search for an address:</b>
        <input type="text" name="q" value="" class="address_input" size="40" />
        <input type="submit" name="find" value="Search" />

      </p>
    </form>
    <div id="map_canvas" style="width: 1000px; height: 500px"></div>

    <!-- Sample addresses //-->
    <p>
      <b>The Places That I have been</b><br />

      <a href="javascript:void(0)"
      onclick="map.clearOverlays();return false;">
      Clear All the marks</a><br />


      <a href="javascript:void(0)"
      onclick="findLocation('Sichuan,China');return false;">
      Deyang,Sichuan,<b>China</b></a><br />

      <a href="javascript:void(0)"
      onclick="findLocation('Hangzhou');return false;">
      Hangzhou,Zhejiang,<b>China</b></a><br />

      <a href="javascript:void(0)"
      onclick="findLocation('Vancouver,Canada');return false;">Vancouver,BC,<b>Canada</b></a><br />



    </p>
  </body>
</html>